<template>
  <div>
    {{ data }}
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";

let props = defineProps(["data"]);
console.log(props.data);

let imagePaths = ref([]);
let oddPaths = ref([]);
let evenPaths = ref([]);

const regex = /<img[^>]*src="([^"]+)"/g;
const matches = props.data.match(regex);

if (matches) {
  for (const match of matches) {
    const pathRegex = /src="([^"]+)"/;
    const matchResult = match.match(pathRegex);
    if (matchResult && matchResult[1]) {
      imagePaths.value.push(matchResult[1]);
    }
  }
}

imagePaths.value.reduce(
  (acc, path, index) => {
    if (index % 2 === 0) {
      acc[0].push(path);
    } else {
      acc[1].push(path);
    }
    return acc;
  },
  [evenPaths.value, oddPaths.value]
);

console.log(oddPaths.value);
console.log(evenPaths.value);
console.log(imagePaths.value);
</script>